<template>
  <div id="person">
    <div style="position: fixed; top: 0; width: 100%; min-width: 1210px">
      <myheader></myheader>
    </div>
    <div id="content" style="background-color: #fff;min-width: 1210px;margin-top:58px">
      <div class="index-out">
        <div class="index-left">
          <div class="user-area">
            <div class="user-pic">
              <img class="avatar" :src="`../static/pic/avatars/${user.avatar}`" style="width:100%;height:100%" alt="">
              <div class="change-avatar" @click="showChangeAvatar">更换头像</div>
            </div>
            <div class="flex-row-center" style="margin: 10px">
              <div class="flex-column" style="text-align: left;font-size:13px;width: 60px">
                <div style="line-height:24px;">用户名：</div>
                <div style="line-height:24px;">权　限：</div>
              </div>
              <div class="flex-column" style="text-align: left;font-weight: 600;margin-left: 10px;width: 40px">
                <div class="username">{{ user.username }}</div>
                <div style="line-height:24px;font-size:13px;">{{ user.userGroup === '0' ? '学生' : user.userGroup == '1' ? '超管' : user.userGroup == '2' ? '助教' : '老师' }}</div>
              </div>
            </div>
            <div class="user-list">
              <div class="user-list-bgc">
                <div class="user-list-item" @click="toPerson">个人信息</div>
              </div>
              <div class="user-list-bgc">
                <div class="user-list-item" @click="toMessage">我的消息</div>
              </div>
              <div class="user-list-bgc">
                <div class="user-list-item active">修改密码</div>
              </div>
              <div class="user-list-bgc">
                <div class="user-list-item" @click="toBindEmail">绑定邮箱</div>
              </div>
            </div>
          </div>

        </div>
        <div class="index-right">
          <!-- <div @click="toChange" class="change">
            <a>修改密码</a>
          </div> -->
          <div class="flex-row-center" style="margin-top:40px">
            <div class="flex-column">
              <div class="font">旧密码:</div>
              <div class="error-msg"></div>
              <div class="font">新密码:</div>
              <div class="error-msg"></div>
              <div class="font">确认密码:</div>
              <div class="error-msg"></div>
            </div>
            <div class="flex-column">
              <input 
                v-model="formInline.oldpassword" 
                :style="oldPasswordErr==='' ? '' : 'border-color: #ED4014;box-shadow: 0 0 4px -0px #ED4014;'"
                @input="validateOldPwd"
                type="password"
                name="username"
              >
              <div class="error-msg" v-html="oldPasswordErr"></div>
              <input 
                v-model="formInline.password" 
                :style="passwordErr==='' ? '' : 'border-color: #ED4014;box-shadow: 0 0 4px -0px #ED4014;'"
                @input="validatePwd"
                type="password"
                name="username"
              >
              <div class="error-msg" v-html="passwordErr"></div>
              <input @input="validateCheckPwd"  v-model="formInline.repassword" name="schoolName"
                :style="repasswordErr==='' ? '' : 'border-color: #ED4014;box-shadow: 0 0 4px -0px #ED4014;'" type="password">
              <div v-html="repasswordErr" class="error-msg"></div>
              <div class="flex-row">
                <button class="button" @click="handleSubmit">提交</button>
              </div>
              
            </div>
          </div>
          
        </div>
      </div>
    </div>
    <avatars v-if="showAvatarFlag" @handleclose="closeAvatars"/>
  
  </div>
</template>

<script>
import header from "../components/header.vue";
import avatars from "../components/avatars.vue";
import { changePassword } from "../api/api";
import * as coreJS from "../utils/core";
export default {
  name: "change_pass",
  data: function() {
    return {
      formInline: {
        password: "",
        repassword: "",
        oldpassword: ""
      },
      passwordErr: '',
      repasswordErr: '',
      oldPasswordErr: "",
      showAvatarFlag: false
    };
  },
  components: {
    myheader: header,
    avatars
  },
  created() {
  },
  computed: {
    mdpassword: function() {
      return coreJS.encryptedPassword(this.formInline.password);
    },
    mdoldpass: function() {
      return coreJS.encryptedPassword(this.formInline.oldpassword);
    },
    user: function() {
      return JSON.parse(this.$store.state.user)
    },
  },
  methods: {
    closeAvatars(){
      this.showAvatarFlag = false
    },
    showChangeAvatar() {
      this.showAvatarFlag = true
    },
    validateOldPwd(){
      var pattern = /^\S{6,20}$/g;
      if (this.formInline.oldpassword === "") {
        this.oldPasswordErr = "请输入旧密码";
      } else if (!pattern.test(this.formInline.oldpassword)) {
        this.oldPasswordErr = "请输入6-20个非空白字符";
      } else {
        this.oldPasswordErr = "";
      }
    },
    validatePwd(){
      var pattern = /^\S{6,20}$/g;
      if (this.formInline.password === "") {
        this.passwordErr = "请输入密码";
      } else if (!pattern.test(this.formInline.password)) {
        this.passwordErr = "请输入6-20个非空白字符";
      } else {
        if (this.formInline.repassword !== "") {
          this.validateCheckPwd();
        }
        this.passwordErr = "";
      }
    },
    validateCheckPwd(){
      if (this.formInline.repassword === "") {
        this.repasswordErr = "请再次输入密码";
      } else if (this.formInline.repassword !== this.formInline.password) {
        this.repasswordErr = "两次输入密码不一致!";
      } else {
        this.repasswordErr = "";
      }
    },
    toPerson(){
      this.$router.push("/person");
    },
    toMessage(){
      this.$router.push("/message");
    },
    toBindEmail(){
      this.$router.push("/bindEmail");
    },
    handleSubmit() {
      this.validateOldPwd();
      this.validatePwd();
      this.validateCheckPwd();
      if (this.passwordErr || this.repasswordErr || this.oldPasswordErr) {
        this.$Message.error("信息不完整");
        return
      }
      var changeParams = {
        oldpass: this.mdoldpass,
        password: this.mdpassword,
        UUID: this.$store.state.UUID,
        token: this.$store.state.token
      };

      changePassword(changeParams)
      .then(response => {
        if (response.state === true) {
          this.$Message.success("修改成功");
          this.$data.formInline.password = "";
          this.$data.formInline.repassword = "";
          this.$store.commit("del_token");
          this.$router.push({
            name: "login"
          });
        } else {
          this.$Message.error(response.msg);
        }
      })
      .catch(error => {
        this.$Message.error(error.status);
      });
    }
  },
  mounted() {
  }
};
</script>

<style lang="less" scoped>
  @import "../assets/css/config.less";
  .flex-row-center{
    display: flex;
    justify-content: center;
  }
  .flex-column{
    display: flex;
    flex-direction: column;
  }
  .flex-row{
    display: flex;
    justify-content: start;
  }
  .user-area{
    border-radius: 4px;
    background-color: @header-bgc;
    width: 100%;
    height: 100%;
    padding: 40px 0 0 0;
    min-height: 500px;
    .username{
      line-height: 24px; 
      font-size: 14px;
      width: 80px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; //文本不换行，这样超出一行的部分被截取，显示...
    }
  }
  .user-area .user-pic{
    position: relative;
    margin: 0px auto;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    // padding: 40px 0 0 0;
    overflow: hidden;
    padding: -2px;
  }
  .index-out{
    padding: 30px 30px;
    min-width: 1210px;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: start;
  }
  .index-left{
    width: 20%;
    height: 100%;
    padding: 0px 20px 0 0;
  }
  .index-right{
    width: 80%;
    padding: 20px 15px;
  }
  .user-list{
    margin: 25px auto;
    width: 90%;
  }
  .user-list-bgc{
    width: 100%;
  }
  .user-list-item{
    width: 112px;
    margin: 0 auto;
    padding: 5px 0;
    text-align: left;
    font-size: 14px;
  }
  .user-list-bgc:hover{
    font-size: 14px;
    color: @color1;
    background-color: @hover-bgc;
    cursor: pointer;
  }
  .person{
    width: 80%;
  }
  .font{
    line-height: 45px;
    font-size: 16px;
    text-align: right;
    margin: 0 15px 0 0 ;
  }
  input{
    line-height: 18px;
    margin: 5px;
    height: 35px;
    width: 320px;
    border: @border;
    border-radius: 4px;
    padding: 5px 15px;
    font-size: 14px;
  }
  input:hover{
    border: @border-hover;
  }
  input:focus{
    border-color: #22A0FF;
    box-shadow: 0 0 4px -0px #22A0FF;
    outline: none;
  }
  .button{
    line-height: 36px;
    background-color: @color1;
    color: @white;
    border-radius: 4px;
    font-size: 14px;
    width: 120px;
    margin: 10px 4px;
    letter-spacing: 2px;
    outline: none;
    border: none;
    cursor: pointer;
  }
  .button:hover{
    background-color: @color2;
  }
  .button:active{
    background-color: @color3;
  }
  .button-back{
    line-height: 36px;
    background-color: @white;
    color: #606266;
    border-radius: 4px;
    font-size: 14px;
    width: 120px;
    margin: 10px 4px;
    letter-spacing: 2px;
    outline: none;
    border: 1px solid #DCDFE6;
    cursor: pointer;
  }
  .error-msg{
    line-height: 20px;
    height: 25px;
    text-align: left;
    padding: 0 4px;
    color: #ED4014;
  }
  .active{
    color: @color1;
  }
  .bg {
  padding: 24px 24px;
  position: absolute;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.change-avatar {
  background-color:rgba(0, 0, 0, 0.6);
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  // display: flex;
  justify-content: center;
  align-items: center;
  cursor: default;
  display: none;
  &:hover{
    display: flex;
  }
}
.avatar{
  background-color: #fff;
}
.avatar:hover+.change-avatar{
  display: flex;
}

</style>
